<template>
    <div class="cart">
        <div class="top-bar">
            <div class="left" @click="$router.go(-1)">
                <i class="iconfont icon-left"></i>
            </div>
            <div class="seach">购物车({{ itemCount }})</div>
            <div class="right" v-show="!cartEdit" @click="cartEdit=true">
                <div>编辑</div>
                <i class="iconfont icon-message"></i>
            </div>
            <div class="right" v-show="cartEdit" @click="cartEdit=false">
                <div>完成</div>
                <i class="iconfont icon-message"></i>
            </div>
        </div>
        <ScrollView class="sell-list">
            <div>
                <div class="item" v-for="(p, index) in cartList" :key="index">
                    <div class="box" v-show="!cartEdit">
                        <input type="checkbox" :id="'check'+index" v-model="p.flag" @change="checkItem(p.tradeItemId)">
                        <label :for="'check'+index"></label>
                    </div>
                    <div class="img">
                        <img :src="p.img" alt="">
                    </div>
                    <div class="info">
                        <div class="desc">{{  p.title }}</div>
                        <div class="spec">商铺:无</div>
                        <div class="sum">
                            <span class="new">￥{{ p.price }}</span>
                            <span class="old">￥{{ p.ordPrice }}</span>
                            <div class="count-btn" v-show="!cartEdit">
                                <span class="num">x{{ p.count }}</span>
                            </div>
                            <div class="count-btn" v-show="cartEdit">
                                <span class="sub border" @click="subCartCount(p.tradeItemId)">-</span>
                                <span class="num border">{{ p.count }}</span>
                                <span class="add border" @click="addCartCount(p.tradeItemId)">+</span>
                            </div>
                        </div>
                    </div>
                    <div class="detele" v-show="cartEdit" @click="deleteCartCount(p.tradeItemId)">
                        <span>删除</span>
                    </div>
                </div>
            </div>
        </ScrollView>
        <transition-group enter-active-class="animated bounceInUp" leave-active-class="animated bounceOutDown">
            <div class="bottom-bar" key="subCart">
                <div class="box">
                    <input type="checkbox" id="chooseAll" :disabled="cartEdit" v-model="allChecked" @change="chooseAll(allChecked)">
                    <label for="chooseAll"></label>
                </div>
                <div class="sell">
                    <div class="sum">
                        <span>全选({{sums}})</span>
                        <span>￥{{sumPrice}}</span>
                    </div>
                    <div class="sell-btn">
                        <input type="button" value="去结算" @click="removeItem()" :disabled="cartEdit">
                    </div>
                </div>
            </div>
        </transition-group>
        <FiexdMenus></FiexdMenus>
    </div>
</template>

<script>
import { mapState } from 'vuex';
import { mapMutations } from 'vuex';
export default {
    data() {
        return {
            cartEdit: false,
        };
    },
    computed:{
        ...mapState( [ "cartList","allsum" ] ),
        allChecked:{
            get(){
                return this.$store.state.allChecked;
            },
            set(nv){
                this.$store.state.allChecked = nv;
            }
        },
        // 购物车物品数量
        itemCount(){
            let arr = Object.values(this.cartList);
            return arr.length;
        },
        // 选中的数量
        sums(){
            let arrs = Object.values(this.cartList);
            let i = 0;
            arrs.forEach((value)=>{
                if(value.flag){
                    i +=1 ;
                }
            });
            return i;
        },
        sumPrice(){
            let arrs = Object.values(this.cartList);
            let i = 0;
            arrs.forEach((value)=>{
                if(value.flag){
                    i += value.price*value.count;
                }
            });
            return i.toFixed(2);
        }
    },
    methods:{
        ...mapMutations( ["addCartCount","subCartCount","deleteCartCount","chooseAll","checkItem","removeItem"] ),
    }

};
</script>

<style lang="less" scoped>
.cart {
    height: 100%;
    .top-bar {
        position: absolute;
        background-color: white;
        top: 0px;
        width: 100%;
        box-sizing: border-box;
        border-bottom: 1px solid @cc;
        height: @h;
        line-height: @h;
        display: flex;
        flex-flow: row nowrap;
        z-index: 99;
        .left {
            width: @h;
        }
        .right {
            width: @h * 1.5;
            div {
                display: inline-block;
                vertical-align: middle;
                margin-right: 20px;
                font-size: 28px;
            }
            i {
                vertical-align: middle;
                color: @99;
            }
        }
        .left,
        .right {
            box-sizing: border-box;
            text-align: center;
            cursor: pointer;
            font-size: 0px;
            i {
                font-size: 40px;
            }
        }
        .seach {
            flex-grow: 1;
            box-sizing: border-box;
            text-align: center;
            font-size: 36px;
        }
    }
    .sell-list {
        position: absolute;
        top: @h;
        bottom: @h;
        width: 100%;
        .item {
            display: flex;
            flex-flow: row nowrap;
            height: 230px;
            line-height: 200px;
            border-bottom: 1px solid @cc;
            .img {
                height: 100%;
                width: 220px;
                margin: 0px 10px;
                img {
                    height: 100%;
                    width: 100%;
                    object-fit: cover;
                    object-position: center;
                    padding: 10px;
                    box-sizing: border-box;
                }
            }
            .info {
                line-height: 36px;
                font-size: 26px;
                // width: 100%;
                flex-grow: 1;
                margin: 10px;
                .desc {
                    height: 36px * 3;
                    font-weight: 500;
                    color: @font;
                }
                .spec {
                    margin-top: 10px;
                    color: @99;
                }
                .sum {
                    margin-top: 10px;
                    font-size: 30px;
                    .new {
                        font-weight: 800;
                        margin-right: 10px;
                    }
                    .old {
                        font-size: 24px;
                        text-decoration: line-through;
                        color: @99;
                    }
                    .count-btn {
                        float: right;
                        margin-right: 30px;
                        .border {
                            border: 1px solid @cc;
                        }
                    }
                    .num,
                    .sub,
                    .add {
                        display: inline-block;
                        width: 40px;
                        height: 40px;
                        text-align: center;
                        line-height: 40px;
                        color: @66;
                    }
                    .sub {
                        margin-right: 10px;
                    }
                    .add {
                        margin-left: 10px;
                    }
                }
            }
        }
    }
    .bottom-bar {
        position: absolute;
        bottom: 0px;
        width: 100%;
        box-sizing: border-box;
        border-top: 1px solid @cc;
        height: @h;
        line-height: @h;
        display: flex;
        flex-flow: row nowrap;
        display: flex;
        flex-flow: row nowrap;
        background-color: white;
        z-index: 99;
        .sell {
            flex-grow: 1;
            .sum {
                font-size: 28px;
                color: @66;
                display: inline-block;
                span:last-child {
                    margin-left: 20px;
                    color: @pink;
                }
            }
            .sell-btn {
                float: right;
                margin-right: 40px;
                font-size: 0px;
                input[type="button"] {
                    font-size: 30px;
                    color: white;
                    background-color: @pink;
                    border: none;
                    padding: 10px 50px;
                    border-radius: 8px;
                    vertical-align: middle;
                }
                input[disabled] {
                    color: @66;
                    background-color: @de;
                }
            }
        }
    }
    .box {
        font-size: 0px;
        width: 60px;
        margin-left: 20px;
        text-align: center;
        input[type="checkbox"] {
            display: none;
        }
        label {
            background-image: url("../assets/checkbox.png");
            display: inline-block;
            width: 40px;
            height: 40px;
            background-repeat: no-repeat;
            background-size: 100% auto;
            background-position-y: -50px;
            vertical-align: middle;
        }
        // 当文本框被选中时执行的样式
        input[type="checkbox"]:checked + label {
            background-position-y: 0px;
        }
        input[disabled] + label {
            background-color: @de;
            border-radius: 50%;
        }
    }
    .detele {
        width: 200px;
        text-align: center;
        color: white;
        background-color: @ef;
        span {
            background-color: @pink;
            display: inline-block;
            font-size: 26px;
            height: 50px;
            line-height: 50px;
            width: 80%;
            text-align: center;
            color: white;
        }
    }
}
</style>

